<template>
    <div 
    class="btn-load"
    v-if="remain > 0"
    >
        <div class="text">
            剩余{{remain}}页未读，
            <span 
            class="btn" 
            @click="clickHandler"
            >
                继续阅读
                <i class="el-icon-arrow-down"></i>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        remain: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        clickHandler() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    $whiteHeight: 180px;

    .btn-load{
        padding-top: $whiteHeight;
        text-align: center;
        line-height: 1em;
        background-image: linear-gradient(rgba(0,0,0,0), white);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;

        .text {
            .btn{
                color: $primaryColor;
                cursor: pointer;
            }
        }
    }
</style>